<!--
 * @Author: wjc
 * @Date: 2025-09-19 10:04:54
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-30 15:23:32
 * @Description: 工作台
-->
<template>
  <div class="workspace">
    <div class="flex flex-1 flex-col gap-6">
      <NiceCard class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <i class="i-custom-avatar wh-64px"></i>
          <div>
            <div class="font-600 text-5">您好, Louis, 开始一天的工作吧！</div>
            <div class="text-placeholder mt-1.5 text-sm">运营部 经理 上次登录 2025-06-10 09:23</div>
          </div>
        </div>
        <div class="flex gap-12">
          <div class="text-right">
            <div class="text-placeholder text-sm">入职时间</div>
            <div class="font-600">2023-06-12</div>
          </div>
          <div class="text-right">
            <div class="text-placeholder text-sm">剩余年假</div>
            <div class="font-600 text-primary">5天</div>
          </div>
          <div class="text-right">
            <div class="text-placeholder text-sm">薪酬状态</div>
            <div class="font-600 text-success">已发放</div>
          </div>
        </div>
      </NiceCard>
      <div class="flex flex-1 gap-6 sm:flex-wrap md:flex-nowrap">
        <NiceCard class="w-50% lt-sm:w-full">
          <NiceCardHeader class="flex-row justify-between">
            <div class="flex flex-1 items-center gap-2">
              <i class="i-custom-tree wh-24px"></i>
              <span class="font-500 text-4.5">组织架构</span>
            </div>
            <div>
              <NiceButton variant="link">全部展开</NiceButton>
              <NiceButton variant="link">全部收起</NiceButton>
              <NiceButton variant="link">查看全部</NiceButton>
            </div>
          </NiceCardHeader>
          <NiceCardContent>
            <div class="org-stats text-3.5 font-600 mb-4 flex items-center gap-6">
              <div class="flex items-center gap-1">
                <i class="rounded-100% bg-primary size-3"></i>
                <span>部门总数 16</span>
              </div>
              <div class="flex items-center gap-1">
                <i class="rounded-100% bg-success size-3"></i>
                <span>岗位总数 64</span>
              </div>
              <div class="flex items-center gap-1">
                <i class="rounded-100% bg-warning size-3"></i>
                <span>人员总数 212</span>
              </div>
            </div>
            <div class="org-tree-container">
              <el-tree :data="orgData" node-key="id" :default-expand-all="true" icon="">
                <template #default="{ node, data }">
                  <div class="flex h-8 w-full items-center justify-between">
                    <div class="flex items-center gap-2">
                      <span :class="data.icon || ''"></span>
                      <div>
                        <span class="text-4 font-500">{{ node.label }}</span>
                        <!-- <div class="text-placeholder text-3">上级：{{ data.parent || '无' }}</div> -->
                      </div>
                    </div>
                    <Icon
                      icon="lucide:chevron-down"
                      class="color-placeholder size-4 cursor-pointer"
                    />
                  </div>
                </template>
              </el-tree>
            </div>
          </NiceCardContent>
        </NiceCard>
        <NiceCard class="w-full">
          <NiceCardHeader class="flex-row justify-between">
            <div class="flex items-center gap-2">
              <i class="i-custom-list wh-24px"></i>
              <span class="font-500 text-4.5">我的工单</span>
            </div>
            <div class="org-stats text-3.5 font-600 flex items-center gap-6">
              <div class="flex items-center gap-1">
                <i class="rounded-100% bg-gray size-3"></i>
                <span>全部 16</span>
              </div>
              <div class="flex items-center gap-1">
                <i class="rounded-100% bg-warning size-3"></i>
                <span>审批 64</span>
              </div>
              <div class="flex items-center gap-1">
                <i class="rounded-100% bg-danger size-3"></i>
                <span>预期 212</span>
              </div>
            </div>
          </NiceCardHeader>
          <NiceCardContent>
            <el-table :data="tableData" :height="350">
              <el-table-column prop="workOrderId" label="工单编号" />
              <el-table-column prop="type" label="类型" width="90">
                <template #default="{ row }">
                  <el-tag :type="getTagType(row.type)" size="small">
                    {{ row.type }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题" show-overflow-tooltip />
              <el-table-column prop="status" label="状态" width="80">
                <template #default="{ row }">
                  <el-tag :type="getStatusType(row.status)" size="small">
                    {{ row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="160" />
              <el-table-column label="操作" width="120" fixed="right">
                <template #default>
                  <NiceButton variant="link" class="ml-2 p-0">处理</NiceButton>
                  <NiceButton variant="link" class="color-gray ml-5 p-0">详情</NiceButton>
                </template>
              </el-table-column>
            </el-table>

            <div class="mt-4 flex justify-end">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="total"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, prev, pager, next"
              />
            </div>
          </NiceCardContent>
        </NiceCard>
      </div>
      <NiceCard>
        <NiceCardHeader>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <i class="i-custom-type wh-24px"></i>
              <span class="font-500 text-4.5">子系统</span>
            </div>
            <div class="flex cursor-pointer items-center gap-1">
              <i class="i-custom-setting size-3"></i>
              <span class="color-primary text-3.5">自定义</span>
            </div>
          </div>
        </NiceCardHeader>
        <NiceCardContent>
          <div class="inline-flex w-full gap-4">
            <div
              v-for="item in subSystems"
              :key="item.name"
              class="rounded-1 bg-primary-sub flex-1 p-4"
            >
              <div class="mb-4 flex items-center justify-between">
                <span class="flex items-center gap-2">
                  <i :class="item.icon" class="size-6"></i>
                  <span class="font-600 text-3.5">{{ item.name }}</span>
                </span>
                <NiceIconButton class="relative">
                  <Icon
                    icon="lucide:ellipsis-vertical"
                    class="text-foreground size-4 cursor-pointer"
                  />
                </NiceIconButton>
              </div>
              <div class="xs:grid-cols-1 grid grid-cols-2 gap-2">
                <div
                  v-for="subItem in item.children"
                  :key="subItem.name"
                  class="text-foreground/80 text-3.5 rounded-1 bg-card-sub hover:bg-primary hover:text-accent cursor-pointer py-2 text-center"
                >
                  {{ subItem.name }}
                </div>
              </div>
            </div>
          </div>
        </NiceCardContent>
      </NiceCard>
    </div>
    <NiceCard class="w-350px">
      <NiceCardHeader>
        <div class="flex items-center gap-2">
          <i class="i-custom-update wh-24px"></i>
          <span class="font-500 text-4.5">系统升级记录</span>
        </div>
      </NiceCardHeader>
      <NiceCardContent>
        <el-timeline>
          <el-timeline-item
            v-for="(update, index) in updateLogs"
            :key="index"
            :timestamp="update.date"
            type="primary"
          >
            <div class="font-500 mb-1">{{ update.version }}</div>
            <div class="text-placeholder text-sm">{{ update.description }}</div>
          </el-timeline-item>
        </el-timeline>
      </NiceCardContent>
      <NiceCardHeader>
        <div class="flex items-center gap-2">
          <i class="i-custom-service wh-24px"></i>
          <span class="font-500 text-4.5">实施服务</span>
        </div>
      </NiceCardHeader>
      <NiceCardContent>
        <div class="bg-primary-sub rounded-2.5 b-primary-border mb-4 flex gap-3 border p-4">
          <i class="i-custom-todo size-8"></i>
          <div class="flex-1">
            <div class="font-600 text-sm">系统培训安排</div>
            <div class="text-placeholder my-1 text-sm">
              下周三14:00 - 16:00
              <br />
              将进行新功能使用培训，请准时参加
            </div>
            <NiceButton variant="link" class="p-0">确认参加</NiceButton>
          </div>
        </div>
        <div
          class="bg-success-foreground rounded-2.5 b-success-foreground-border flex items-start gap-3 border p-4"
        >
          <i class="i-custom-code size-8"></i>
          <div class="flex-1">
            <div class="font-600 text-sm">技术支持服务</div>
            <div class="text-placeholder my-1 text-sm">
              工作时间：周一至周五 14:00 - 16:00
              <br />
              服务热线：400-123-4567
            </div>
            <NiceButton variant="link" class="p-0">在线咨询</NiceButton>
          </div>
        </div>
      </NiceCardContent>
    </NiceCard>
  </div>
</template>

<script setup lang="ts">
  import { Icon } from '@iconify/vue'
  import {
    NiceButton,
    NiceCard,
    NiceCardContent,
    NiceCardHeader,
    NiceIconButton,
  } from '@nice/nice-ui'

  defineOptions({ name: 'Workspace' })

  const tableData = ref([
    {
      workOrderId: 'WO-20250610-001',
      type: '行政工单',
      title: '6月份部门办公用品申请',
      status: '待审批',
      createTime: '2025-06-10 09:15',
    },
    {
      workOrderId: 'WO-20250610-002',
      type: '业务工单',
      title: '6月份部门办公用品申请',
      status: '已逾期',
      createTime: '2025-06-10 09:15',
    },
    {
      workOrderId: 'WO-20250610-002',
      type: '业务工单',
      title: '6月份部门办公用品申请',
      status: '已逾期',
      createTime: '2025-06-10 09:15',
    },
    {
      workOrderId: 'WO-20250610-002',
      type: '业务工单',
      title: '6月份部门办公用品申请',
      status: '已逾期',
      createTime: '2025-06-10 09:15',
    },
    {
      workOrderId: 'WO-20250610-002',
      type: '业务工单',
      title: '6月份部门办公用品申请',
      status: '已逾期',
      createTime: '2025-06-10 09:15',
    },
    {
      workOrderId: 'WO-20250610-002',
      type: '业务工单',
      title: '6月份部门办公用品申请',
      status: '已逾期',
      createTime: '2025-06-10 09:15',
    },
  ])
  // 分页相关
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(28)

  // 标签类型
  const getTagType = (type: string) => {
    const map: Record<string, string> = {
      行政工单: 'primary',
      业务工单: 'success',
      OA审批: 'warning',
    }
    return map[type] || ''
  }

  // 状态标签类型
  const getStatusType = (status: string) => {
    const map: Record<string, string> = {
      待审批: 'warning',
      已逾期: 'danger',
      已完成: 'success',
    }
    return map[status] || ''
  }

  const orgData = [
    {
      id: 1,
      label: '总公司',
      type: 'company',
      parent: '无',
      icon: 'i-custom-company',
      children: [
        {
          id: 2,
          label: '运营部',
          type: 'department',
          count: 1,
          parent: '总公司',
          icon: 'i-custom-departments',
          children: [
            {
              id: 21,
              label: '运营一组',
              type: 'team',
              parent: '运营部',
            },
            {
              id: 22,
              label: '运营二组',
              type: 'team',
              parent: '运营部',
            },
          ],
        },
        {
          id: 3,
          label: '技术部',
          type: 'department',
          parent: '总公司',
          icon: 'i-custom-tech',
        },
        {
          id: 4,
          label: '市场部',
          type: 'department',
          parent: '总公司',
          icon: 'i-custom-tech',
        },
      ],
    },
  ]
  const updateLogs = [
    {
      version: 'V1.3.0 版本更新',
      date: '2025-07-01',
      description: '新增服务事项预约时间控制功能，优化工单分配流程',
    },
    {
      version: 'V1.1.0 版本更新',
      date: '2025-06-01',
      description: '新增服务事项预约时间控制功能，优化工单分配流程',
    },
    {
      version: 'V1.2.0 版本更新',
      date: '2025-06-15',
      description: '新增服务事项预约时间控制功能，优化工单分配流程',
    },
  ]
  const subSystems = [
    {
      name: '小区管理',
      icon: 'i-custom-home',
      children: [
        {
          name: '小区列表',
          icon: 'i-custom-home',
        },
        {
          name: '业主管理',
          icon: 'i-custom-parking',
        },
        {
          name: '房屋信息',
          icon: 'i-custom-user',
        },
        {
          name: '数据统计',
          icon: 'i-custom-work-order',
        },
      ],
    },
    {
      name: '车辆管理',
      icon: 'i-custom-car',
      children: [
        {
          name: '车辆列表',
          icon: 'i-custom-home',
        },
        {
          name: '停车记录',
          icon: 'i-custom-parking',
        },
        {
          name: '黑名单',
          icon: 'i-custom-user',
        },
        {
          name: '车位管理',
          icon: 'i-custom-work-order',
        },
      ],
    },
    {
      name: '收费管理',
      icon: 'i-custom-bag',
      children: [
        {
          name: '物业费',
          icon: 'i-custom-home',
        },
        {
          name: '停车费',
          icon: 'i-custom-parking',
        },
        {
          name: '收费记录',
          icon: 'i-custom-user',
        },
        {
          name: '欠费管理',
          icon: 'i-custom-work-order',
        },
      ],
    },
    {
      name: '报事报修',
      icon: 'i-custom-notice',
      children: [
        {
          name: '工单列表',
          icon: 'i-custom-home',
        },
        {
          name: '新增工单',
          icon: 'i-custom-parking',
        },
        {
          name: '派工管理',
          icon: 'i-custom-user',
        },
        {
          name: '完成验收',
          icon: 'i-custom-work-order',
        },
      ],
    },
  ]
</script>

<style lang="scss" scoped>
  .workspace {
    @apply wh-full flex flex-wrap gap-6;

    :deep(.el-tree) {
      --el-tree-node-content-height: 40px;
    }
  }
</style>
